<template>
	<div class="preView">
		<div style="font-weight: bold; margin-bottom: 10px; margin-left: 40px; margin-top: 20px;font-size: 20px;text-align: center">
      <i class="el-icon-s-data"></i>
      积分排行榜</div>
    <div style="font-size: 15px; margin-left: 45px;text-align: center">(显示积分前20的排名)</div>
		<div class="sortView">
		  <div class="sortTitle">
		    <label style="font-size: 15px; margin-left: 40px;">我的排名： {{mySort}}</label>
		  </div>

      <div class="numThree">
        <div class="one" >
          <span class="gradient-text">1st</span>
          <img  v-bind:src="sortList[0].avatar ? sortList[0].avatar :'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'"
                 style="width: 80px; height: 80px; border-radius: 30px;"
                 mode="aspectFit"></img>
          <label style="font-size: 20px; font-weight: bold;">{{ sortList[0].nickName }}</label>
          <label style="font-size: 20px; font-weight: lighter;">部门：{{ sortList[0].dept.deptName }}</label>
          <label style="font-size: 20px; font-weight: lighter;">当前积分：{{ sortList[0].points }}</label>
        </div>
        <div class="two" >
          <span class="gradient-text">2nd</span>
          <img  v-bind:src="sortList[1].avatar ? sortList[1].avatar :'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'"
                style="width: 80px; height: 80px; border-radius: 30px;"
                mode="aspectFit"></img>
          <label style="font-size: 20px; font-weight: bold;text-align: center">{{ sortList[1].nickName }}</label>
          <label style="font-size: 20px; font-weight: lighter;">部门：{{ sortList[1].dept.deptName }}</label>
          <label style="font-size: 20px; font-weight: lighter;">当前积分：{{ sortList[1].points }}</label>
        </div>
        <div class="three" >
          <span class="gradient-text">3rd</span>
          <img  v-bind:src="sortList[2].avatar ? sortList[2].avatar :'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'"
                style="width: 80px; height: 80px; border-radius: 30px;"
                mode="aspectFit"></img>
          <label style="font-size: 20px; font-weight: bold;text-align: center">{{ sortList[2].nickName }}</label>
          <label style="font-size: 20px; font-weight: lighter;">部门：{{ sortList[2].dept.deptName }}</label>
          <label style="font-size: 20px; font-weight: lighter;">当前积分：{{ sortList[2].points }}</label>
        </div>
      </div>

		  <div class="sortItemView" v-for="(item, index) in sortList">
		    <div class="line"/>
        <div class="sortItem">
          <img   v-bind:src="item.avatar ? item.avatar :'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'"
                 style="width: 60px; height: 60px; margin-left: 40px; border-radius: 30px;"
                 mode="aspectFit"></img>
          <div class="sortItemRight">
            <label style="margin-bottom: 10px; font-size: 15px; font-weight: lighter;">姓名：{{ item.nickName }}</label>
            <label style="margin-bottom: 10px; font-size: 15px; font-weight: lighter;">部门：{{ item.dept.deptName }}</label>
            <label style="font-size: 15px; font-weight: lighter;">当前积分：{{ item.points }}</label>
          </div>
          <label style="margin-right: 50px; margin-left: auto; font-size: 15px; font-weight: lighter;">{{index+1}}</label>
        </div>
		  </div>
		</div>
	</div>
</template>

<script>
	import {getAllUserByPoints} from "../api/system/user";

  export default {
	  name: "Index",
	  data() {
	    return {
		   mySort: null,
		   sortList: []
	    };
	  },
    created() {
      this.getAllUserByPoints();
    },
	  methods: {
      getAllUserByPoints() {
        getAllUserByPoints().then(response => {
          this.sortList = response.list;
          this.mySort = response.mySort;
        })
      },

	  }
	};
</script>

<style>
	.preView {
    width: 60vw; /* 占据屏幕宽度的50% */
    margin: 0 auto; /* 居中显示 */
    padding: 20px; /* 内边距增加一些空间 */
    box-sizing: border-box; /* 包括内边距和边框 */
    background-color: #ffffff; /* 背景色可选，增加对比 */
    border-radius: 10px; /* 边框圆角 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	}
  .numThree{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
  }
  .numThree > div {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .gradient-text {
    font-size: 35px;
    font-weight: bold;
    background: linear-gradient(90deg, #126df6, #7ac5fa); /* 渐变颜色从粉红色到橙色 */
    -webkit-background-clip: text; /* 只将背景应用到文字 */
    -webkit-text-fill-color: transparent; /* 使文字填充透明，显示背景渐变 */
  }
  .one{
    display: flex;
    flex-direction: column;
    line-height: 2;
  }
  .two{
    display: flex;
    flex-direction: column;
    line-height: 2;
  }
  .three{
    display: flex;
    flex-direction: column;
    line-height: 2;
  }
	.sortView {
		display: flex;
		flex-direction: column;
		background-color: white;
		margin-bottom: 30px;
		border-radius: 8px;
		width: 95%;
	}
	.sortTitle {
	  display: flex;
	  flex-direction: row;
	  height: 50px;
	  align-items: center;
	}
	.sortItemView {
	  display: flex;
	  flex-direction: column;
	}
	.sortItem {
	  display: flex;
	  flex-direction: row;
	  align-items: center;
	  margin-top: 15px;
	  margin-bottom: 15px;
	}
	.sortItemRight {
	  display: flex;
	  flex-direction: column;
	  margin-left: 20px;
	}
	.line {
	  width: 95%;
	  height: 0.5px;
	  margin-left: 3%;
	  background: #d4c4c4;
	  position: relative;
	  text-align: center;
	}

</style>
